import F from 'ant-design-vue/es/form/Form'

export default {
  data() {
    return {
      aform: this.form
    }
  },
  props: Object.assign({}, F.props, {
    // form: {
    //   type: Object,
    //   default: function() { return {} }
    // },
    formItems: {
      type: Array,
      default: function() { return [] }
    },
    gutter: {
      type: Number | Object | Array,
      default: function() { return [24, 6] }
    }
  }),
  watch: {

  },
  created() {
  },
  methods: {
  },
  mounted() {
  },
  render() {
    const { formItems, gutter, form: { getFieldDecorator }} = this
    const { ...rest } = this.$props
    var restObj = rest
    for (var key in restObj) {
      if (restObj[key] === undefined) { delete restObj[key] }
    }
    console.log(restObj)
    const aform = (
      <a-form {...{ props: restObj }}>
        <a-row gutter={gutter}>
          {formItems.map(
            ({ label, id, content, col = {}, options, style, slot = false }) =>
              slot ? content
                : <a-col {...{ props: col }}>

                  {label
                    ? <a-input-group compact style={{ display: 'flex' }}>
                      <a-form-item style={label.style}>
                        {label.id ? getFieldDecorator(label.id, label.options)(label.content) : label.content}
                      </a-form-item>
                      <a-form-item style={style}>{id ? getFieldDecorator(id, options)(content) : content}</a-form-item>
                    </a-input-group>
                    : <a-form-item style={style}>{id ? getFieldDecorator(id, options)(content) : content}</a-form-item>}

                </a-col>

          )}
        </a-row>
      </a-form>
    )

    return (
      <div class='form-wrapper'>
        { aform }
      </div>
    )
  }
}
